<template>

  <el-descriptions column="3" border size="large" v-loading="dataLoading">
    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <HelpFilled />
          </el-icon>
          设备名称
        </div>
      </template>
      {{ detailsInfo.equipmentName }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <CopyDocument />
          </el-icon>
          规格型号
        </div>
      </template>
      {{ detailsInfo.equipmentModel }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <Histogram />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ detailsInfo.deptName }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <Memo />
          </el-icon>
          维护类型
        </div>
      </template>
      {{ detailsInfo.itemName }}
    </el-descriptions-item>


    <!-- 
      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Timer />
            </el-icon>
            派工时间
          </div>
        </template>
        {{ formatDate(new Date(detailsInfo.sendTime)) }}
      </el-descriptions-item> -->



    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <UserFilled />
          </el-icon>
          维护人
        </div>
      </template>
      {{ detailsInfo.dutyUserName }}
    </el-descriptions-item>


    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <StarFilled />
          </el-icon>
          状态
        </div>
      </template>
      <dict-tag :type="DICT_TYPE.KEEP_TYPE" :value="detailsInfo.status" />
    </el-descriptions-item>

  </el-descriptions>
</template>
<script lang="ts" setup>
const dialogTitle = ref('待维护设备') // 弹窗的标题
import { propTypes } from '@/utils/propTypes'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter, formatDate } from '@/utils/formatTime'
import { EquipmnetKeepWaitApi, EquipmnetKeepWait } from '@/api/business/equipmnetkeepwait'

defineOptions({ name: 'MaintenanceInformationView' })

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap.large,
  }
})

const detailsInfo = ref({
  id: undefined,
  keepNo: undefined,
  itemId: undefined,
  itemName: undefined,
  equipmentId: undefined,
  status: undefined,
  planDate: undefined,
  remaining: undefined,
  dutyUserId: [],
  dutyUserName: undefined,
  equipmentName: undefined,
  equipmentModel: undefined,
  sendTime: undefined,
})

const dataLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

/** 打开弹窗 */
const openDetailInfo = async (id?: number, type: string) => {
  // 修改时，设置数据
  if (id) {
    dataLoading.value = true
    try {
      detailsInfo.value = await EquipmnetKeepWaitApi.getEquipmnetKeepWaitDamage(id)
    } finally {
      dataLoading.value = false
    }
  }
}

defineExpose({ openDetailInfo }) // 提供 openDetailInfo 方法，用于打开弹窗显示详细信息



</script>
